<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" src="js/pageLoadBefore.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
    <style>
        #bg {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #loginAndRegister {
            width: 470px;
            height: 400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5%;
            position: relative;
            z-index: 1001;
            background-color: #880000;
            color: #FFFFFF;
            padding: 20px 30px;
        }

        .logOrReg {
            color: #FFFFFF;
            font-size: 20px;
            text-align: center;
            padding: 10px;
        }

        .logOrReg div {
            cursor: pointer;
        }

        .logOrReg .active {
            font-weight: bold;
            font-size: 22px;
            cursor: default;
        }

        .inputIcon {
            width: 36px;
            height: 40px;
            background-size: contain;
            -webkit-background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin: 10px 10px 0 10px;
        }

        .telIcon {
            background-image: url("img/telIcon.png");
        }

        .passwordIcon {
            background-image: url("img/passwordIcon.png");
        }

        .inputLine {
            margin: 30px 0 50px 0;
            border: 1px solid #ff5b5b;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            height: 60px;
            line-height: 60px;
        }

        .inputStyle {
            margin-left: 5px;
            margin-right: 15px;
        }

        .inputStyle input {
            background-color: transparent;
            color: #FFFFFF;
            border: 0;
            outline: none;
            width: 100%;
            height: 100%;
            font-size: 21px;
        }

        .inputStyle input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #FFFFFF;
        }

        .inputStyle input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #FFFFFF;
        }

        .inputStyle input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #FFFFFF;
        }

        .inputStyle input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #FFFFFF;
        }

        .getCode {
            background-color: #730000;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -webkit-border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            cursor: pointer;
            height: 100%;
            width: 120px;
            text-align: center;
        }

        .OK {
            background-color: #FFFFFF;
            color: #880000;
            font-size: 22px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            margin-top: 15px;
            padding: 10px 150px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--顶部-->
<div class="topBar ub ub-ae MainBC">
    <div class="logo"></div>
    <div class="ub path"><a >首页</a><span> > </span><a >用户中心</a><span> > </span><span>登录</span></div>
    <div class="ub-f"></div>
    <!--<div class="ub ub-ac pExit">-->
    <!--<div class="exit"></div>-->
    <!--<div>退出登录</div>-->
    <!--</div>-->
</div>
<!--浮标-->
<div class="fixedSub">
    <div class="icon icon-top" onclick="toTop();"></div>
    <div class="icon icon-phone"></div>
    <div class="icon icon-chat"></div>
    <div class="icon icon-user" onclick="window.location.href='serveServer.html'"></div>
</div>
<!--主体-->
<div class="ub">
    <!--左侧菜单-->
    <div class="nav">
        <div class="ub ub-ac navItem">
            <div><img src="img/zuhe.png"></div>
            <div>组合</div>
            <div class="ub-f ub ub-pe"><img src="img/angle.png"></div>
        </div>
        <ul>
            <li><a href="stockPool.html">股票池</a></li>
            <li><a href="operateStrategy.html">操作策略</a></li>
        </ul>
        <div class="ub ub-ac navItem">
            <div><img src="img/fuwu.png"></div>
            <div>服务</div>
            <div class="ub-f ub ub-pe"><img src="img/angle.png"></div>
        </div>
        <ul>
            <li><a href="serveTeacher.html">我要找老师</a></li>
            <li><a href="serveServer.html">我要找客服</a></li>
            <li><a href="serverMade.html">我要去定制</a></li>
        </ul>
        <div class="ub ub-ac navItem">
            <div><img src="img/zhanghu.png"></div>
            <div>我的账户</div>
            <div class="ub-f ub ub-pe"><img src="img/angle.png"></div>
        </div>
        <ul>
            <li><a href="myOrder.html">我的订单</a></li>
            <li><a href="serverVIP.html">我要升级VIP</a></li>
            <li><a href="msgNotify.html">消息通知</a></li>
            <li><a href="wxSever.html">微信服务</a></li>
        </ul>
        <div class="ub ub-ac navItem">
            <div><img src="img/kefu.png"></div>
            <div>我的客服</div>
            <div class="ub-f ub ub-pe"><img src="img/angle.png"></div>
        </div>
        <div style="padding-top: 15px;display: none;">
            <div class="ub ub-ac ub-pc">
                <img src="img/src/serverPic.png">
            </div>
            <div class="ub ub-ac ub-pc severInfo">
                张颖&nbsp;&nbsp;工号（8384）
            </div>
            <div class="ub ub-ac ub-pc severInfo">
                服务热线：025-962155
            </div>
        </div>
    </div>
    <!--正体-->
    <div class="container ub-f ub ub-ver">
        <!-- 登录和注册-->
        <div id="loginAndRegister">
            <div class="ub logOrReg">
                <div class="ub-f active" onclick="loginOrRegister(this,'login');">登录</div>
                <div class="ub-f" onclick="loginOrRegister(this,'register');">注册</div>
            </div>
            <div id="login">
                <form>
                    <div class="ub inputLine">
                        <div class="inputIcon telIcon"></div>
                        <div class="ub-f inputStyle">
                            <input type="tel" placeholder="请输入手机号"/>
                        </div>
                        <!--<div class="getCode">获取验证码</div>-->
                    </div>
                    <div class="ub inputLine">
                        <div class="inputIcon passwordIcon"></div>
                        <div class="ub-f inputStyle">
                            <input type="password" placeholder="请输入登录密码"/>
                        </div>
                    </div>
                    <div class="ub ub-ac ub-pc">
                        <div class="OK">登录</div>
                    </div>
                </form>
            </div>
            <div id="register" style="display: none;">
                <form>
                    <div class="ub inputLine">
                        <div class="inputIcon telIcon"></div>
                        <div class="ub-f inputStyle">
                            <input type="tel" placeholder="请输入手机号"/>
                        </div>
                        <div id="getCode" class="getCode" onclick="setTime(this);">获取验证码</div>
                    </div>
                    <div class="ub inputLine">
                        <div class="inputIcon passwordIcon"></div>
                        <div class="ub-f inputStyle">
                            <input type="password" placeholder="请输入登录密码"/>
                        </div>
                    </div>
                    <div class="ub ub-ac ub-pc">
                        <div class="OK">注册</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<!--<div class="footer"></div>-->

<!--背景蒙层-->
<div id="bg"></div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
    function loginOrRegister(e, id) {//显示登录框或注册框
        var $this = $(e), $login = $('#login'), $register = $('#register');
        if ($this.hasClass('active')) {
            return;
        }
        $this.addClass('active').siblings().removeClass('active');
        switch (id) {
            case 'login':
                $login.css('display', 'block');
                $register.css('display', 'none');
                break;
            case 'register':
                $login.css('display', 'none');
                $register.css('display', 'block');
                break;
        }
    }

    var timeInit = 60;//验证码初始倒计时时限，单位秒
    var countdown = timeInit;//验证码初始倒计时计时器
    function setTime(e) {//验证码倒计时
        var $e = $(e);
        if (countdown == 0) {
            $e.html('获取验证码');
            $e.css('pointer-events', 'auto');
            countdown = timeInit;
            return;
        } else {
            $e.html(countdown + '秒后重获');
            $e.css('pointer-events', 'none');
            countdown--;
        }
        setTimeout(function () {
            setTime(e)
        }, 1000)
    }

</script>
</body>
</html>